Node.js REPL

交互


REPL 是由node.js所支持的可运行在终端内的控制台窗口即交互式命令环境,按照官方的说法叫“简单的交互式编程环境”,通常就比如你在终端内输入 R,进入R的REPL环境一样,node同样支持。

提示


Node REPL与其他的REPL环境内不同的特点在于,他支持tap键进行补全,以及提示:

1
2
> console.log
[Function: log]

点命令

node.js与 python以及r等 repl交互式环境不同的之处通过点命令可以体现的琳琳尽至,就比如:

python

1
2
3
4
Python 3.9.2 (default, Feb 20 2021, 18:40:11) 
[GCC 10.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> exit()

node

1
2
3
4
Welcome to Node.js v15.10.0.
Type ".help" for more information.
> .exit
>
ID DA 快捷键
.help 显示帮助
.editor 启用编辑模式,可以编写多行的js代码,在editor模式下可通过使用ctrl+D来运行 code
.break 当输入多行表达式的时候,使用break可以中止进一步输入 ctrl+c
.clear 将 REPL上下文设置空占位符,通常等价式为 Linux内的create ,主要用于清除多行表达式
.load 加载 js文件
.save 保存 repl 环境下输入的所有内容
.exit 退出 node.js repl 交互式环境

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Node.js 安装与简介

nodejs是运行在服务器端的 javascript,基于 chrome v8引擎其特点分别是:

  1. 运行在 google chrome 内核;
  2. node.js 应用程序运行在单个进程中,无需为请求创建新的线程;
  3. I/O操作会在响应时返回恢复操作与平常的阻塞线程以此来耗费CPU循环等,使得可以处理上千个并发链接;
  4. 除了可以支持前端代码之外还可以支持后端的代码(就比如支持 sass、stylus、less预处理等)

安装


在Arch linux系统中,或使用pacman软件管理包的读者可通过在 shell 中使用如下命令进行安装:

1
sudo pacman -S node

当安装完成之后可通过使用 node -v来查看当前的node.js版本(通常都是最新版本);

构建应用程序

输出 hello,world
当一切安装完成之后或许我们可以通过使用node.js来构建一个应用程序的实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const http = require('http')

const hostname = 'localhost'
const port = 5000

const server = http.createServer((req,res) => {
res.statusCode = 200
res.setHeader('Content-Type','text/plain')
res.end('Hello,world!')
})

server.listen(port, hostname, ()=> {
console.log(`当前服务运行在 http://${hostname}:${port} 中`);
})

在以上的code之中,我们首先通过引入http模块来就进行支持,并通过使用使用 createServer来建立一个新的HTTP服务器并使对此进行响应和请求(request,respond),当接受到新的请求和响应的里面的事件就会被调用,其中:

  1. res.statusCode = 200 即浏览器响应代码(代表响应成功) 200 OK
  2. red.setHeader 设置头为Content-Type纯文本类型
  3. 之后关闭响应后使用 res.end来发送响应数据

node.js 与 浏览器内的javascript 区别

node.js 与 浏览器的区别在于都使用javascript作为主要语言,从我的理解而言,node.js和浏览器支持的javascript不同,浏览器所支持的js是为前端,而node是运行在服务器端的。

其中node.js我们可以搭配 ejs,less、stylus、sass等css或js的扩展语言,来更加方便的写前端,也可以通过Node.js内所支持的语法写后端的处理方式

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Less 安装与简介

Less与sass、stylus的区别之处在于支持浏览器支持,Less官方为此推出了专门的less.js,用于处理.less语法,并将此转换为浏览器可认知的语法格式。而Sass、stylus之类的只能通过使用node.js来进行预处理,或者你可以通过使用相关语法转换为.css,这都是以上语言所支持的。

Less与Sass、Stylus等CSS扩展语言一样,都支持变量、函数以及Mixin等特征,使得CSS更加容易维护可扩展,而Less虽然语法上没有Sass、Stylus等具有特征,但支持浏览器支持是他的特点之一

npm

通常安装 less 的方法可以通过使用脚手架进行安装,即npm install -g less来进行全局安装,通过 less 可将 .less转换为.css文件:

1
less styles.less styles.css

通过 lessc 来进行转换为 css

.less转换为.css,则需要使用lessc style.less style.css来进行转换,转换后的信息如下:

1
2
3
4
5
6
7
8
9
10
[root@kunlun less]# lessc style.less style.css
[root@kunlun less]# more style.css
p {
color: red;
}
[root@kunlun less]# more style.less
@red: red;
p {
color: @red;
}

lessc 不存在

如果lessc不存在的话可通过在 node_modules即Node模块中下载是否存在,可使用sudo find / -name lessc来搜索less文件是否存在。如果存在则可通过下方命令进行建立:

1
ln -s {user}node_modules/less/bin/lessc /usr/local/bin/lessc

{user}替换为你的node_modules之前的目录即可,之后通过使用lessc来检测是否关联成功。

浏览器支持

下载

Lass的浏览器支持需要引入官方的lass.js文件来进行渲染,lass与其他css扩展的区别就是可以在非node.js环境中运行(主要是因为node.js支持欲渲染功能)。

通过“ https://codeload.github.com/less/less.js/zip/master ” 来进行下载,解压缩后将dist/less.js文件引入到项目文件中即可。

使用

效果
本文通过使用 Laravel 框架进行运行(也可支持将扩展名改为.html),并通过引入less.js来进行支持.less渲染:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello</title>
<link rel="stylesheet" type="text/less" href="less/style.less">
<script src="js/less.js"></script>
</head>
<body>
<p>Hello</p>
</body>
</html>
1
2
3
4
5
@red: red;

p {
color: @red;
}

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Laravel oauth 自定义用户名或密码错误提示

在写Laravel Oauth的时候,不仅仅修改了之前的几个BUG,找了很久最后通过了不屑的努力,来修改These credentials do not match our records.,这个提示为“用户名或密码错误”的对应提示,我们可以通过修改resouces/lang/en/auth.php类中的failed即可,最后修改为:密码或用户名错误

之前因为在表单验证的时候是通过confirmed来进行验证密码是否正确的,但今天我觉得有点不对经,才发现是之前我理解错了。confirmed的意思为两次输入密码一样

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Laravel-数据库映射错误 could not find driver

问题

今天在 Laravel 框架中, 初始化数据库映射的过程中即“php artisan migrate”中出现Illuminate\Database\QueryException : could not find driver (SQL: select * from information_schema.tables where table_schema = test and table_name = migrations and table_type = 'BASE TABLE')错误,全称为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 Illuminate\Database\QueryException  : could not find driver (SQL: select * from information_schema.tables where table_schema = test and table_name = migrations and table_type = 'BASE TABLE')

at /home/kunlun/Development/Web/ZhongShan/Zhongshan_computer_port_security_joint_audit_platform/vendor/laravel/framework/src/Illuminate/Database/Connection.php:669
665| // If an exception occurs when attempting to run a query, we'll format the error
666| // message to include the bindings with SQL, which will make this exception a
667| // lot more helpful to the developer instead of just the database's errors.
668| catch (Exception $e) {
> 669| throw new QueryException(
670| $query, $this->prepareBindings($bindings), $e
671| );
672| }
673|

Exception trace:

1 PDOException::("could not find driver")
/home/kunlun/Development/Web/ZhongShan/Zhongshan_computer_port_security_joint_audit_platform/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

2 PDO::__construct()
/home/kunlun/Development/Web/ZhongShan/Zhongshan_computer_port_security_joint_audit_platform/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

Please use the argument -v to see more details.

解决

该方法的解决方案就是通过编辑php.ini文件进行解决:

  1. find / -name php.init
  2. vim /etc/php/php.ini
  3. ;extension=pdo_mysql 将前面的 “;” 去掉后保存在此运行 php artisan migrate即可解决此问题

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

EJS-基础语法

Ejs 的基础语法与 Jpa 语法类似,所以有Java或java script的读者会感觉非常的亲近,所以本章我们主要介绍Ejs的基础语法,分别为 输出、循环、判断等三个大类,也是常用的一些语法进行演示,在本文中,我们主要使用 ejs-cli 来编写 .ejs转换为.html的形式。

在 Ejs 中,快速编辑和渲染以及简单的木板标签和浏览器端和服务器端是他的特点之一,而常用标签主要有:

  1. <% 流程控制标签
  2. <%= 原文输出HTML内容标签
  3. <%- 输出标签
  4. <%- include() 引入其他模板路径标签

变量

<% and <%=

在本文中我们主要通过使用 <%来进行声明一个变量,之后我们可以他哦难过使用 <%=来进行引用变量:

1
2
3
4
5
<% title="Hello,world" %>

<h1>
Title: <%= title %>
</h1>

<% and <%-

除了之前通过使用原文输出内容标签所输出的并不支持嵌套html语法,我们通过使用<%-输出标签即可完成变量中包含html语法:

1
2
<% var title="<h1>hello,world</h1>" %>
<%-title %>

其输出的将会是 “hello,world”

循环

1
2
3
<% for(var i=0; i<10; i++) { %>
<li>输出 <%-i%> 次</li>
<% } %>

其具体流程与变量一样,通过使用<%标签来定义 i 变量,并输出9次,之后通过使用<%-即输出标签来输出循环次数,之后我们就可以通过使用 ejs-cli 将其输出为.html即可完成循环。

判断


除了变量与循环标签之外,<%还支持判断语法,在上一段代码中,我们加入以下代码即可完成判断的操作:

1
2
3
4
5
<% if(i >= 9) { %>
<p>输出完成</p>
<% } else {%>
<p>输出失败</p>
<%} %>

当变量i输出次数大于且等于9(>=9)的情况下,输出“输出完成”,否则则输出“输出失败”等字样。

模板嵌套


模板嵌套是在 ejs中稍微特别的一种,通过使用木板嵌套可以使得两个不同的.ejs文件内信息互相引用等(以文件形式):

index.ejs

1
<% include ./include %>

include.ejs

1
<p>Hello,world</p>

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

EJS.安装与简介

Ejs,是一个纯 JavaScript所开发的一种高校式JavaScript模板引擎,其中“E”来代表可嵌入、高效、优雅、简单。可以帮助普通的JavaScript 代码来生成 HTML页面,EJS由于缓存和快速开发、用于调试以及语法简单和社区活跃备受开发者所喜爱。

安装

全局安装与浏览器支持安装

安装 EJS的方法分为两种,一种为通过使用 npm install ejs来安装,而另一种也可以通过ejs 仓库内的发行版来进行直接的引用,即全局安装和浏览器支持版本等。这里我们附上 EJS 仓库URL:https://github.com/mde/ejs,你可通过使用 https://github.com/mde/ejs/releases/tag/v3.1.6 来下载 EJS 3.1 版本。

全局安装

在一般的情况下,会使用npm install ejs来进行安装ejs,但本文中使用ejs-cli,即npm install ejs-cli,ejs与ejs-cli的区别就是 ejs-cli更加的简洁实在,没有 ejs那样的繁琐。通过使用ejs和ejs-cli的一段时间,将 .ejs 输出转换为 .html,ejs 基本上全部出错,而 ejs-cli则是一路绿灯,所以本文使用 ejs-cli 作为演示。

安装过程中的报错解决
package.json 没有的问题

如果在执行npm install ejs-cli的时候出现有类似与 package.json没有的问题,我们可以使用 npm init来执行生成package.json文件。

这个是会他会提示你进行配置,基本上我们可以直接全部使用回车键来进行跳过,也可以使用npm init -y来使用默认配置。

npm ERR! code ETIMEDOUT \ npm ERR! errno ETIMEDOUT

如果在安装中出现这种错误,我们可以使用npm install -g ejs-cli进行全局安装来解决此问题。

全局安装与本地安装的区别
在默认的情况下我们会使用本地安装,通过使用本地安装会在当前目录下生成一个 node_modules的目录,而全局安装则是将模块安装到全局,不会在项目的 node_modules目录下保存模块包。

输出

ejs-cli


当安装完成之后,我们可以通过使用 ejs-cli -h来查看ejs-cli的安装是否成功,如果没有成功可以查看npm是否安装失败来最后判断问题,当安装完成之后,我们可以在本地新建项目,且建立 index.ejs 文件,并写入(在此之前先建立一个/ejs目录用于存储ejs转换html后的文件):

1
2
3
4
5
<% title="Hello,world" %>

<h1>
Title: <%= title %>
</h1>

最后我们可以通过使用 ejs-cli -f index.ejs -o ejs/来在 /ejs 目录下生成 index.html文件文件。

浏览器支持


除了通过使用 ejs-cli 的方式来将 .ejs文件转换成 .html的方式,处于这种方式开发团队表示很繁琐,所以推出了另一种通过直接引入就可以写 ejs 语法的js扩展,再次我们需要新建一个index.html文件并写入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<p id="title"></p>
<script src="js/ejs.js"></script>
<script>
var html = ejs.render('<%="Hello,world!" %>','');
document.getElementById('title').innerHTML = html;
</script>
</body>
</html>

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

码云搭建Hexo-blog与图床

由于github在国内经常会出现访问无法请求的情况,所以被迫使用了Gitee,说实话Gitee在国内除了访问速度快以外,基本上支持了很多类似与github的功能和服务,但做的也并不比github差在什么地方,在本文中主要列出了 Gitee pages 服务的使用以及搭建 Gitee图床。

安装 Hexo

在本文中我们以 Arch Linux 系统为例,通常使用 pacman 软件管理包的读者都可以正常的进行使用以及执行,如果不行的话可能就是你的 软件源造成的问题

npm

sudo pacman -S npm 需要安装 npm 来进行安装 Hexo,由于 Hexo是需要 NodeJS的,所以使用 npm 来方便解决部署上的问题,当安装完后执行 npm -v即可查看是否安装成功。

hexo


当安装完成之后,我们需要安装 hexo-cli,通过使用sudo npm install -g hexo-cli来进行安装,安装完成后使用 hexo v来进行查看是否安装完成。

部署 Hexo

Hexo 初始化

当Hexo安装完成的时候,我们可以通过使用 hexo init来进行初始化,通常需要下载Hexo框架内的默认主题及资源等(如果执行 hexo init报错的话你可以新建一个文件夹,在刚刚新建的文件夹内来执行该命令)

当 hexo 初始化完成之后,此时目录内有以下文件:

ID DA
_config.yml 配置文件,可以再次配置仓库以及url等
package.json 应用程序信息,通常 EJS、Stylus、Markdown等默认安装,可以自行配置
scaffolds 模板文件,当新建文章的时候,Hexo会根据scaffold来建立文件
themes Hexo 主题文件夹,Hexo会根据主题来生成响应的静态页面
public 用于存放 Hexo 生成的静态资源文件 (当你执行 hexo g时会生成)

配置 _config.yml

创建码云仓库

创建码云仓库你可以选择私密或开源,这都不会影响 Gitee pages 服务的使用,当仓库创建完成的时候,将仓库链接即 “https://gitee.com/sif_one/sif_one.git”写入 _config.yml deploy处:

创建仓库的时候,如果仓库名与用户名相同,即之后的 pages url 为 http://用户名.gitte.io 这里的用户名指的是仓库 url gitee.com 后的信息即 “sif_one”为用户名。用户名与仓库名相同时,则 pages url为 http://sif_one.gitee.io ,否则将会为 http://sif_one.gitee.io/xxx

当配置完 deplay 的时候,还需要在配置文件内的URL为自己的url地址,即开启码云仓库 pages 服务时生成的地址:

将其修改为url: http://sif_one.gitee.io如果你的仓库名和用户名不相同的时候,所生成的url可能会为 http://sif_one.gitee.io/xxx,这个时候你可以在 url 的下方,加上root: . 或 root: /设置根目录,如:

url: http://sif_one.gitee.io/xxx
root : /

新建文章与推送

在 hexo 主目录下使用 hexo new 分类 文章名即可完成新的文章建立,此时会在source/_posts下生成对应的markdown文件,你可以进行写作。之后可以通过 hexo s来进行本地浏览,也可以通过使用 hexo g -d来进行静态文件的生成和推送。

VNote 与 Gitee 图床

在默认的情况下,Hexo 支持 当你新建文章的时候为你建立一个相同的文件名用于存放该文章的图片,如果你在 VNote下进行会非常的麻烦,这个时候如果你使用的是 版本: 2.10 VNote即可进行。

新建 Gitee 仓库与生成个人私钥

VNote的安装你可以使用 其github提供的下载方式,但最新版本为3.0为VNote 2重构所以不支持 图床,如果你使用 Arch Linux 可以通过使用 pacman -S vnote-git 进行安装

新建Gitee的时候你可以选择开源和私密,当然这都不会影响你的仓库正常上传,Gitee的私密密钥生成可以通过https://gitee.com/profile/personal_access_tokens进行生成。


生成之后的令牌复制到 VNote中的 文件 -> 设置 -> 图床 -> Gitee 进行填写,这个时候仓库名为 https://gitee.com/sif_one/drawing-bed 的话,那么sif_one就为用户名,drawing-bed就为仓库名。

当一切配置好后,重启 VNote,之后在编辑文件下右击图片,会有一个上传图片的选项,选择配置的Gitee即可完成上传。

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

放大缩小选择器 transform

通常我们在前端的开发当中如果要实现标签的放大缩小等功能,可以使用CSS当中的transform: scale(1.01)来进行实现,通常搭配 focus与hover两个选择器进行使用,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
.form:focus {
border-bottom: 5px solid #25c181;
color: #25c181;
-webkit-transition: 1s;
transform: scale(1.01);
}
.form:hover {
border-bottom: 5px solid #25c181;
color: #25c181;
-webkit-transition: 1s;
transform: scale(1.01);
box-shadow: 0px 2px 0px #79f8c3;
}

在以上的语句当中,其中scale(1.01)用于约定放大的效果,这里建议不超越2以上的数值,不然写出来的前端估计稍微有点那么不怎么好看。

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布